{% extends "base.html" %}
{% block title %}Hearing #{{ hearing.id }} — Admin{% endblock %}
{% block content %}
<div class="container">
    <h1 class="page-title"><i class="fas fa-gavel"></i> Hearing #{{ hearing.id }}</h1>
    <p class="page-subtitle">{{ hearing.hearing_type.replace('_',' ').title() }} · {{ hearing.scheduled_date }} at {{ hearing.scheduled_time }}</p>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;">

        <!-- Hearing details -->
        <div class="card">
            <div class="card-header"><i class="fas fa-video"></i> Hearing Details</div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem;">
                    <div><span style="color:var(--text-muted);">Status:</span> <strong>{{ hearing.status.title() }}</strong></div>
                    <div><span style="color:var(--text-muted);">Judge:</span> {{ hearing.judge_name or 'TBD' }}</div>
                    <div><span style="color:var(--text-muted);">Provider:</span> {{ hearing.room_provider.title() }}</div>
                    {% if hearing.zoom_password %}
                    <div><span style="color:var(--text-muted);">Meeting Password:</span> {{ hearing.zoom_password }}</div>
                    {% endif %}
                    {% if hearing.outcome_notes %}
                    <div><span style="color:var(--text-muted);">Outcome Notes:</span><br>{{ hearing.outcome_notes }}</div>
                    {% endif %}
                </div>
                {% if hearing.status in ('scheduled', 'in_progress') %}
                <div style="margin-top:1rem;">
                    <a href="/hearing/{{ hearing.id }}/join" target="_blank"
                       style="background:rgba(29,78,216,0.12);color:#1D4ED8;border:1px solid rgba(29,78,216,0.3);padding:0.5rem 1rem;border-radius:8px;text-decoration:none;font-size:0.85rem;font-weight:700;">
                        <i class="fas fa-video"></i> Join Hearing Room
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Case details + actions -->
        <div class="card">
            <div class="card-header"><i class="fas fa-folder-open"></i> Case</div>
            <div class="card-body">
                {% if case %}
                <div style="display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem;">
                    <div><span style="color:var(--text-muted);">Case #:</span> {{ case.id }}</div>
                    <div><span style="color:var(--text-muted);">Category:</span> {{ case.category or '—' }}</div>
                    <div><span style="color:var(--text-muted);">Status:</span> {{ case.status.title() }}</div>
                    {% if case.summary %}
                    <div><span style="color:var(--text-muted);">Summary:</span><br>{{ case.summary }}</div>
                    {% endif %}
                </div>
                {% else %}
                <div style="color:var(--text-muted);">Case record not found.</div>
                {% endif %}

                {% if hearing.status in ('scheduled', 'in_progress') %}
                <hr style="border:none;border-top:1px solid var(--border);margin:1.25rem 0;">
                <form method="post" action="/admin/hearing/{{ hearing.id }}/complete" style="display:flex;flex-direction:column;gap:0.5rem;">
                    <textarea name="outcome_notes" rows="3" placeholder="Outcome notes / judgment summary"
                              style="background:#F4F6F9;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:0.5rem 0.75rem;font-size:0.85rem;resize:vertical;"></textarea>
                    <button type="submit" style="background:rgba(14,122,67,0.12);color:var(--success);border:1px solid rgba(14,122,67,0.3);padding:0.5rem 1rem;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:600;">
                        <i class="fas fa-check"></i> Mark Completed
                    </button>
                </form>
                <details style="margin-top:0.75rem;">
                    <summary style="cursor:pointer;font-size:0.85rem;color:var(--warning);font-weight:600;"><i class="fas fa-calendar-plus"></i> Adjourn &amp; Reschedule</summary>
                    <form method="post" action="/admin/hearing/{{ hearing.id }}/adjourn" style="display:flex;flex-direction:column;gap:0.5rem;margin-top:0.75rem;">
                        <input type="date" name="next_date" required style="background:#F4F6F9;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:0.45rem 0.7rem;font-size:0.85rem;">
                        <input type="time" name="next_time" required style="background:#F4F6F9;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:0.45rem 0.7rem;font-size:0.85rem;">
                        <button type="submit" style="background:rgba(150,102,10,0.12);color:var(--warning);border:1px solid rgba(150,102,10,0.3);padding:0.45rem 0.9rem;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:600;">
                            <i class="fas fa-forward"></i> Adjourn to Next Date
                        </button>
                    </form>
                </details>
                {% endif %}
            </div>
        </div>
    </div>

    <div style="margin-top:1.5rem;">
        <a href="/admin/court" style="color:var(--accent);text-decoration:none;font-size:0.88rem;"><i class="fas fa-arrow-left"></i> Back to Court Management</a>
    </div>
</div>
<style>
.card-header { padding:1rem 1.25rem;border-bottom:1px solid var(--border);font-weight:600;font-size:0.9rem;color:var(--accent);display:flex;align-items:center;gap:0.5rem; }
.card-body { padding:1.25rem; }
</style>
{% endblock %}